import React, { memo } from "react"
import { Link } from "react-router"
import { addShoppingApi } from "../../../request/shoppingCar/addShopping"

interface PropsData{
    bookInfo:any,
    key:number
}

const RecommentCard:React.FC<PropsData>=memo((bookInfo)=>{
    const {id,book_name,book_public,book_profile,img_url} = bookInfo.bookInfo
    const newimg_url = "http://localhost:8080/BookService/"+img_url

    // 加入购物车
    const addShopping = ()=>{
        addShoppingApi(book_name,id)
    }


    return (
        <li className="w-96 h-56 bg-white inline-flex m-2 shadow-xl">
            <div className="mr-1.5 mt-5 ml-1.5">
                <img src={newimg_url} alt="" className="min-w-32 h-36"/>
            </div>
            <div className="ml-auto px-2.5">
                <h4 className="mt-5">书名：{book_name}</h4>
                <p className="text-xs my-1.5">出版信息 :  {book_public}</p>
                <p className="text-xs h-12">{book_profile}</p>
                <p className="mt-8">
                    <Link to="/bookinfo" state={{id:id}}>
                    <span className="mx-1.5 bg-blue-400 inline-block w-24 text-center rounded-lg">详细信息</span>
                    </Link>
                    <span className="mx-2 bg-blue-400 inline-block w-24 text-center rounded-lg" onClick={()=>addShopping()}>加入购物车</span>
                </p>
            </div>
        </li>
    )
})

export default RecommentCard